import { Navigate } from "react-router-dom";
import Layout from "../pages/layout/Layout";
import { createBrowserRouter } from "react-router-dom";
import Login from "../pages/login/Login";
import { HaveToken } from "@/components/haveToken";

import { lazy, Suspense } from "react";
const Home =lazy(()=>import('@/pages/layout/home/Home')) //vue中直接用import=>的形式就是懒加载
const Create =lazy(()=>import('@/pages/layout/create/Create'))
const Manage =lazy(()=>import('@/pages/layout/manage/Manage'))
const router = createBrowserRouter([
    {
        path: "/",
        element: (
            <HaveToken>
                <Layout></Layout>
            </HaveToken>
        ),
        children: [
            {
                index: true,
                element: <Suspense fallBck={'loading..'}><Home></Home></Suspense>,
            },
            {
                path: "Home",
                element: <Suspense fallBck={'loading..'}><Home></Home></Suspense>,
            },
            {
                path: "Manage",
                element:<Suspense fallBck={'loading..'}> <Manage></Manage></Suspense>,
            },
            {
                path: "Create",
                element: <Suspense fallBck={'loading..'}><Create></Create></Suspense>,
            },
        ],
    },
    {
        path: "/login",
        element: <Login></Login>,
    },
    {
        path: "*",
        element: <Navigate to="/" replace={true} />, // 重定向到 /Layout
    },
]);

export { router };
